<template>
  <div class="listContentBox ">
    <advancedQueryShrinkComponent ref="advancedQueryShrinkComponent" :labelLength="6" :queryData="queryData" @getQuery="getList" />
    <div class="tabsBox">
      <el-tabs v-model="activeName" @tab-click="handleTabsClick">
        <el-tab-pane v-for="item in drawingFileType" :key="item.dictValue" :label="item.dictLabel" :name="item.dictValue">
          <div class="listBox listBoxLayoutLRBox  rela" :class="layouLeft?'':'listBoxLayoutRBox'">
            <div class="listBoxLayoutL floatLeft" :class="layouLeft?'p-px-16':''">
              <div class="layoutBtn cursor-pointer" @click="layouLeft=!layouLeft"><i :class="layouLeft?'el-icon-arrow-left':'el-icon-arrow-right'"></i></div>
              <div v-if="layouLeft">
                <el-tree
                    ref="tree"
                    :data="treeOptions"
                    :props="defaultProps"
                    :expand-on-click-node="false"
                    :filter-node-method="filterNode"
                    :highlight-current="true"
                    default-expand-all
                    @node-click="handleNodeClick"
                />
              </div>
            </div>
            <div class="listBoxLayoutR floatRight  p-px-l-24   p-px-r-24 p-px-t-16 p-px-b-16">
              <el-row class="listBoxbtn m-px-b-16">
                <el-col :span="4">
                  <!-- v-hasPermi="['preliminaryScheme:add']" -->
                  <el-button type="primary" @click="handleDialog('add','新增','')">新增</el-button>
                </el-col>
              </el-row>
              <div class="listBoxTable">
                <el-table v-loading="listLoading" height="100%" :data="list">
                  <el-table-column label="序号" type="index" width="80" align="center" fixed="left">
                    <template slot-scope="scope">
                      <span>{{ pageIndex(scope.$index, queryData.queryParams) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="projectName" label="所属项目" show-overflow-tooltip width="300" />
                  <el-table-column prop="typeName" label="类型" show-overflow-tooltip width="170" />
                  <el-table-column prop="fileName" label="文件标题" show-overflow-tooltip width="260" />
                  <el-table-column prop="updateByName" label="上传人" show-overflow-tooltip width="170" />
                  <el-table-column prop="updateTime" label="上传时间" show-overflow-tooltip width="190">
                    <template slot-scope="scope">
                      <span>{{ parseTime(scope.row.updateTime,'{y}-{m}-{d}  {h}:{i}') }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="说明" show-overflow-tooltip min-width="200" />
                  <el-table-column label="操作" align="center" fixed="right" width="220">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.createBy == user.userInfo.userId" type="text" @click="handleDialog('edit','修改',scope.row)">修改</el-button>
                      <el-button type="text" @click="handleDialog('view','查看',scope.row)">查看</el-button>
                      <el-button v-if="scope.row.createBy == user.userInfo.userId" type="text" typeC="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                  <!-- 列表缺省 -->
                  <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
                    <el-empty :image-size="70" description="暂无数据"></el-empty>
                  </div>
                </el-table>
              </div>
              <pagination :total="listTotal" :page.sync="queryData.queryParams.pageNum" :limit.sync="queryData.queryParams.pageSize" @pagination="getList" />
            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <dialogForm ref="dialogForm" />
  </div>
</template>
<script>
// api
import { methodGetApi } from '@/api/publicApi'
// 混入
import { listMixins } from '@/mixins/publicMixins/listMixins'
// 组件
import advancedQueryShrinkComponent from '@/components/publicComponents/advancedQuery/indexShrink'
import dialogForm from './component/dialogForm'
// -------------------------------------------------------------
export default {
  name: 'List1',
  mixins: [listMixins],
  components: { advancedQueryShrinkComponent, dialogForm },
  provide() {
    return {
      listQueryParams: this
    }
  },
  // computed: {
  //   user() {
  //     return this.$store.state.user
  //   }
  // },
  data() {
    return {
      // 查询条件+查询组
      queryData: {
        queryParams: {
          pageNum: 1, // 分页的初始值
          pageSize: 10 // 每页的显示数
        },
        data: [
          {
            label: '输入框', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'valueKey' // 查询入参Key
          },
          {
            label: '选择器Dict', // 前端展示的label
            type: 'select', // 格式：select
            value: null, // 查询回填值
            valueKey: 'selectDicts', // 查询入参Key
            typeData: [], // select类储存options
            dataType: 'dicts', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getDicts: 'contract_purchase_type', // 数据字典类型值
            multiple: true// 是不是多选
          },
          {
            label: '选择器Url', // 前端展示的label
            type: 'select', // 格式：select
            value: null, // 查询回填值
            valueKey: 'selectUrl', // 查询入参Key
            typeData: [], // select类储存options
            dataType: 'url', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getUrl: '/api', // // 如果不是数据字典，把后台服务路径传入
            getUrlListBool: false, // 接口返回格式时候为常规数则  例如:[2020,2021]
            getUrlData: null, // 入参
            getUrlMethod: 'get', // 请求类型
            getUrlDictValue: 'id', // 回填时Value的key
            getUrlDictLabel: 'contractName', //  回填时Label的key
            multiple: false// 是不是多选
          },
          {
            label: '树形选择器', // 前端展示的label
            type: 'treeselect', // 格式：select
            value: null, // 查询回填值
            valueKey: 'treeselect', // 查询入参Key
            typeData: [], // tree类储存options
            dataType: 'url', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getUrl: '/api', // // 如果不是数据字典，把后台服务路径传入
            getUrlData: null, // 入参
            getUrlMethod: 'get', // 请求类型
            normalizerObj: { id: 'menuId', label: 'menuName' }, // 需要重构的字段名称数组渲染数据时取值的obj   默认 { id: 'id', label: 'name' }  例如：{ id: 'menuId', label: 'menuName' }
            multiple: false// 是不是多选
          },
          {
            label: '年', // 前端展示的label
            type: 'year', // 格式：数字格式  回填至格式 yyyy
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startYear', // 区间开始查询入参Key
            endKey: 'endYear'// 区间结束查询入参Key
          },
          {
            label: '年月', // 前端展示的label
            type: 'month', // 格式：数字格式  回填至格式 yyyy-mm
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startAmount', // 区间开始查询入参Key
            endKey: 'endAmount'// 区间结束查询入参Key
          },

          {
            label: '年月日', // 前端展示的label
            type: 'date', // 格式：数字格式  回填至格式 yyyy-mm-dd
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startAmount', // 区间开始查询入参Key
            endKey: 'endAmount'// 区间结束查询入参Key
          },

          {
            label: '数字', // 前端展示的label
            type: 'number', // 格式：数字格式
            precision: 2, // 数值精度 默认0
            min: -3, // 可输入的最小值 默认0
            max: 999999999, // 可输入的最大值   默认10位
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startAmount', // 区间开始查询入参Key
            endKey: 'endAmount'// 区间结束查询入参Key
          }
        ]
      },
      layouLeft: true,
      drawingFileType: [],
      activeName: null,
      fileType: null,
      parentId: null,
      // 左侧部分---------start---------
      deptName: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // // 部门树选项
      treeOptions: []
      // 左侧部分---------end-----------
    }
  },

  created() {
    // sys_user_sex 用的时候 改为你需要的字典code
    this.getDicts('sys_user_sex').then((response) => {
      var data = [
        { 'dictLabel': '通知', 'dictValue': '1' },
        { 'dictLabel': '公告', 'dictValue': '2' }
      ]
      this.drawingFileType = data
      this.activeName = data[0].dictValue
      this.drawingFileTypeTreeSelectFun(this.activeName)
      this.$refs['advancedQueryShrinkComponent'].handleQueryFun()
      this.$nextTick(() => {
        this.resizeViewConfig()
      })
    })
  },
  methods: {
    /**
     * @description: 点击tabs
     * @Author: 张佳敏
     * @return {*}
     */
    handleTabsClick() {
      this.fileType = null
      this.$refs['advancedQueryShrinkComponent'].resetFields()
      this.resizeViewConfig()
      this.drawingFileTypeTreeSelectFun(this.activeName)
      this.$refs['advancedQueryShrinkComponent'].handleQueryFun({ fileCategory: this.activeName })
    },

    /**
     * @description:左侧数据
     * @Author: 张佳敏
     * @return {*}
     */
    drawingFileTypeTreeSelectFun() {
      const url = '/system/dept/treeselect'
      const data = {
        categoryId: this.activeName
      }
      methodGetApi(url, data).then(res => {
        this.treeOptions = res.data// 岗位
      })
    },

    /**
     * @description: 筛选节点
     * @Author: baoxuhui
     * @param {*} value
     * @param {*} data
     * @return {*}
     */
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    /**
     * @description: 节点单击事件
     * @Author: baoxuhui
     * @param {*} data
     * @return {*}
     */
    handleNodeClick(data) {
      this.fileType = data.id
      this.parentId = data.parentId
      this.$refs['advancedQueryShrinkComponent'].handleQueryFun({ fileType: data.id, parentId: data.parentId })
    },

    /**
     * @description: 清除额外的查询条件
     * @Author: baoxuhui
     * @return {*}
     */
    resetOtherQueryParams() {
      this.fileType = null
      this.parentId = null
      this.drawingFileTypeTreeSelectFun()
    },

    /**
     * @description: 列表
     * @Author: baoxuhui
     * @param {*} queryParams // 传值
     * @return {*}
     */
    getList(queryParams) {
      queryParams.projectInfoId = ''
      queryParams.fileCategory = this.activeName
      // this.getListMixins('/system/user/list', queryParams)
    },

    /**
     * @description: 删除
     * @Author: baoxuhui
     * @param {*} row
     * @return {*}
     */
    handleDelete(row) {
      const data = {
        id: row.id
      }
      const url = '/drawing-file/removeById'
      this.handleDeleteMixins(url, data)
    },

    /**
     * @description: 打开弹窗
     * @Author: baoxuhui
     * @param {*} type //弹窗状态，add:'新增'，edit:修改，view:'详情'
     * @param {*} typeName //弹窗title '新增'，修改，'详情'
     * @param {*} row //参row
     * @return {*}
     */
    handleDialog(type, typeName, row) {
      // if (type === 'add' && (!this.sentencedEmpty(this.fileType) || this.sentencedEmpty(this.fileType) && this.parentId === 0)) {
      //   return this.msgAlt('请选择类型再添加数据', 'error')
      // }
      this.$refs['dialogForm'].dialogFormVisibleBool = true
      this.$refs['dialogForm'].dialogFormType = type
      this.$refs['dialogForm'].dialogFormTitle = typeName
      // this.$refs['dialogForm'].dialogFormT.fileCategory = this.activeName
      // this.$refs['dialogForm'].dialogFormT.fileType = this.fileType
      // 弹窗 额外入参 需要时传入 不需要注释即可
      // this.$refs['dialogForm'].dialogFormExtra = {}
      // 弹窗 重置表单
      this.$refs['dialogForm'].dialogResetForm()
      if (type !== 'add') {
        // this.$refs['dialogForm'].dialogFormT.id = typeName
        this.$refs['dialogForm'].dialogDetailApi(row)
      }
    },
    /**
     * @description: 打开list弹窗
     * @Author: baoxuhui
     * @param {*} type //弹窗状态，edit:修改，view:'详情'
     * @param {*} typeName //弹窗 title 修改，'详情'
     * @param {*} row //参row
     * @return {*}
     */
    handleListDialog(type, typeName, row) {
      console.log(type, typeName, row)
      this.$refs['dialogList'].dialogListVisibleBool = true
      this.$refs['dialogList'].dialogListType = type
      this.$refs['dialogList'].dialogListTitle = typeName
      // 弹窗 额外入参
      // this.$refs['dialogList'].dialogListExtra = {}
      // 获取列表
      if (type !== 'add') {
        var data = {id: row.id}
        this.$refs['dialogList'].dialogGetList(data)
      }
    },
  }
}
</script>
